<!DOCTYPE html>
<html>
<head>
<!--    vue和vuetify-->
    <script src="../plugins/vuetify/vue.js"></script>
    <script src="../plugins/vuetify/vuetify.js"></script>
<!--    字体-->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<!--    必须使用在线的-->
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="../plugins/vuetify/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
    <v-app>
        <template>
            <v-container
                    fluid
                    class="pa-0"
            >
                <v-row align="center">
                    <v-col
                            cols="12"
                            sm="6"
                    >
                        <div class="text-center">
                            <div class="my-2">
                                <v-btn
                                        x-small
                                        color="secondary"
                                        dark
                                >
                                    Extra small Button
                                </v-btn>
                            </div>
                            <div class="my-2">
                                <v-btn
                                        small
                                        color="primary"
                                        dark
                                >
                                    Small Button
                                </v-btn>
                            </div>
                            <div class="my-2">
                                <v-btn
                                        color="warning"
                                        dark
                                >
                                    Normal Button
                                </v-btn>
                            </div>
                            <div class="my-2">
                                <v-btn
                                        color="error"
                                        dark
                                        large
                                >
                                    Large Button
                                </v-btn>
                            </div>
                            <div class="my-2">
                                <v-btn
                                        x-large
                                        color="success"
                                        dark
                                >
                                    Extra large Button
                                </v-btn>
                            </div>
                        </div>
                    </v-col>
                    <v-col
                            cols="12"
                            sm="6"
                    >
                        <div class="text-center">
                            <div class="my-2">
                                <v-btn
                                        color="secondary"
                                        fab
                                        x-small
                                        dark
                                >
                                    <v-icon>mdi-television</v-icon>
                                </v-btn>
                            </div>
                            <div class="my-2">
                                <v-btn
                                        color="primary"
                                        fab
                                        small
                                        dark
                                >
                                    <v-icon>mdi-pencil</v-icon>
                                </v-btn>
                            </div>
                            <div class="my-2">
                                <v-btn
                                        color="warning"
                                        fab
                                        dark
                                >
                                    <v-icon>mdi-account-circle</v-icon>
                                </v-btn>
                            </div>
                            <div class="my-2">
                                <v-btn
                                        color="error"
                                        fab
                                        large
                                        dark
                                >
                                    <v-icon>mdi-alarm</v-icon>
                                </v-btn>
                            </div>
                            <div class="my-2">
                                <v-btn
                                        color="success"
                                        fab
                                        x-large
                                        dark
                                >
                                    <v-icon>mdi-domain</v-icon>
                                </v-btn>
                            </div>
                        </div>
                    </v-col>
                </v-row>
            </v-container>
        </template>
    </v-app>
</div>


<script>
    new Vue({
        el: '#app',
        vuetify: new Vuetify(),
    })
</script>
</body>
</html>